<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>阅读</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../libs/mui/mui.min.css">
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css" />
		<style>
			/*侧滑*/
			.copyright.mui-table-view-cell:after{right:15px;}
			/*.copyright.mui-table-view-cell{padding-left: 45px;}*/
			.mui-table-view-cell.title{height: auto !important;padding-bottom: 0;}
			.title .mui-table-view-cell:after{left: 0;}
			.title .list{display: none;}
			.title .list>.mui-table-view-cell{padding:11px 0 11px 50px;}
			body,.mui-content{background-color: '#ffffff';}
			.mui-content{padding: 15px}
			p{margin-bottom: 0 !important;}
			.header{background-color: #000000; height: 44px;position: fixed;right: 0;left: 0;top: 0;display: none;z-index: 99;}
			.header a{color: #fff;}
			.header .mui-icon {margin: 10px;}
			.mui-content .content{overflow-y:hidden ;}
			.content .text{font-size:17px;color: #222222;font-weight: 500;}
			.footer{position: fixed;bottom: 0;left: 0;right: 0;padding:0 15px;}
			.footer-alert{position: fixed;bottom: 0;left: 0;right: 0;background-color:#000000;z-index: 2;display: none;}
			.footer-alert1{position: fixed;bottom: 0;left: 0;right: 0;background-color:#000000;z-index: 2;display: none;}
			.footer-alert1 .mui-table-view{background-color: inherit; color: #fff;padding: 10px 0;}
			.footer-alert1 .mui-table-view-cell:after{height: 0;}
			.footer-alert .mui-table-view{background-color: #000000; color:#fff;}
			.footer-alert .mui-table-view-cell{padding: 20px 15px;}
			.footer-alert .mui-table-view:after{height: 0;}
			.footer-alert .lanmu>span{display: table-cell !important;}
			.footer-alert .tab{bottom: 0;display: table;width: 100%;height: 50px;padding: 0;table-layout: fixed;}
			.footer-alert .tab-item{display: table-cell;overflow: hidden;width: 1%;height: 50px;text-align: center;vertical-align: middle;white-space: nowrap;text-overflow: ellipsis;color: #fff;}
			.footer-alert .tab-item>i{font-size:1.2em ;}
			.bg1{background-color:#cdefce; height: 27px; width: 27px; border-radius: 100%;display: inline-block;vertical-align: middle;}
			.bg2{background-color:#cdd2ef; height: 27px; width: 27px; border-radius: 100%;display: inline-block;vertical-align: middle;}
			.bg3{background-color:#efedcd; height: 27px; width: 27px; border-radius: 100%;display: inline-block;vertical-align: middle;}
			.bg4{background-color:#efcfcd; height: 27px; width: 27px; border-radius: 100%;display: inline-block;vertical-align: middle;}
			.footer-alert1 .mui-btn{border-radius: 20px;padding: 6px 18px;background-color: transparent;color:#fff; width: 20%;}
			.footer-alert1 .mui-table-view:after{height: 0;}
			/*进度条*/
			.scale_panel{width: 100%; color:#999;position:absolute;left:50%; margin-left:-29%;top:50%;margin-top: -3px;}
			.scale span{background:url(../public/img/scroll.png) no-repeat;background-size:cover;width:18px;height:18px;position:absolute;left:-2px;top:-6px;cursor:pointer;border-radius: 100%;}
			.scale{ background-repeat: repeat-x; background-position: 0 100%; background-color: #ffffff; border-left: 1px #929292 solid;  width: 58%; height: 6px; position: relative; font-size: 0px; border-radius: 3px; }
			.scale div{ background-repeat: repeat-x; background-color: #929292; width: 0px; position: absolute; height: 6px; width: 0; left: 0; bottom: 0; }
			.aside-content{height: 100%; width: 85%;position: fixed;z-index: 1000; top: 0; bottom: 0;left: -85%; right:0 ;}
			.aside-content .content{width: 100%;height: auto;overflow-y: scroll; background-color:#efeff4;}
			.off-canvas-backdrop{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #000000;opacity: 0.5;filter:alpha(opacity=50);display: none;z-index: 99;}
			/*bg*/
			.bg>.box1{width: 3%; background:transparent;position: fixed;bottom: 0;left: 0;}
			.bg>.box2{width: 3%;background:transparent;position: fixed;bottom: 0;right: 0;}
			#content{font-size:14px ;}
			.name{font-size: 16px;}
			body{font-size:12px;}  
			@font-face {
				font-family:'Arial';
				src: url('../libs/iconfont/fonts/Arial.ttf') 
			} 
			@font-face {
				font-family: 'timesNewRoman';
				src: url('../libs/iconfont/fonts/TimesNewRoman.ttf')
			} 
			@font-face {
				font-family:'cambria';
				src: url('../libs/iconfont/fonts/cambria.ttf')
			} 
			.inner-wrap .text_area{font-family: 'timesNewRoman';} 
		</style>
	</head>
	<body>
		<div class="footer-alert">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span class="previous">上一章</span>
						<span class="scale_panel">
							<div class="scale" id="bar">
								<div></div>
								<span id="btn"></span>
							</div>
						</span>
					<span class="mui-pull-right next">下一章</span>
				</li>
			</ul>
			<nav class="tab">
				<a class="tab-item" id="CanvasBtn">
					<i class="mui-icon iconfont">&#xe617;</i>
				</a>
				<a class="tab-item" id="book-set">
					<i class="mui-icon iconfont" style="font-size: 1.6em;">&#xe620;</i>
				</a>
				<!--<a class="tab-item download">
					<i class="mui-icon iconfont">&#xe61f;</i>
				</a>-->
			</nav>
		</div>
		<div class="footer-alert1">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell font_size">
					<label>字号</label>
					<button class="mui-btn" type="button" style="left: 20%;">大</button>
					<button class="mui-btn" type="button" style="left: 45%; border-color: #139f13;">中</button>
					<button class="mui-btn" type="button" style="right: 9%;">小</button>
				</li>
				<li class="mui-table-view-cell font_face">
					<label>字体</label>
					<button class="mui-btn" type="button" style="left: 20%;border-color: #139f13;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="Times new roman">Times new roman</button>
					<button class="mui-btn" type="button" style="left: 47%;" title="Arial">Arial</button> 
					<button class="mui-btn" type="button" style="right: 5%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="Cambria">Cambria</button>
				</li>
				<li class="mui-table-view-cell background">
					<label>背景</label>
					<span class="bg1 mlr"></span>
					<span class="bg2 mlr"></span>
					<span class="bg3 mlr"></span>
					<span class="bg4 mlr"></span>
				</li>
			</ul>
		</div>
		<div class="off-canvas-left">
			<!--侧滑菜单部分-->
			<aside class="aside-content">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="content">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell copyright">
									<i class="mui-icon iconfont take" style="font-weight: 800;">&#xe61b;</i>
									<span class="mlr">返回</span>
								</li>
								<li class="mui-table-view-cell title">
									<div style="padding:0 0 11px 0;" class="menu">
										<i class="mui-icon iconfont pull" style="font-weight: 800;" >&#xe61a;</i>
										<span class="mlr book_name"></span>
										<span class="mui-pull-right mui-h5 chapter_num">0</span>
									</div>
									<ul class="mui-table-view list">
										<!--<li class="mui-table-view-cell">
											<label class="mui-lvs">1.科学世界</label>	
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell">
											<label>2.台球</label>
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell">
											<label>3.射手和农场主</label>
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell">
											<label>4.台球</label>
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell ">
											<label>5.射手和农场主</label>
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell">
											<label>6.台球</label>
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell" >
											<label style="color:#8f8f94;">7.射手和农场主</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell">
											<label style="color:#8f8f94;">8.台球</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell">
											<label>6.台球</label>
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell" >
											<label style="color:#8f8f94;">7.射手和农场主</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell">
											<label style="color:#8f8f94;">8.台球</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell">
											<label>6.台球</label>
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell" >
											<label style="color:#8f8f94;">7.射手和农场主</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell">
											<label style="color:#8f8f94;">8.台球</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell">
											<label>6.台球</label>
											<span class="mui-pull-right mui-h5">5</span>
										</li>
										<li class="mui-table-view-cell" >
											<label style="color:#8f8f94;">7.射手和农场主</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell">
											<label style="color:#8f8f94;">8.台球</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell" >
											<label style="color:#8f8f94;">7.射手和农场主</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>
										<li class="mui-table-view-cell" >
											<label style="color:#8f8f94;">7.射手和农场主</label>
											<span class="mui-pull-right mui-h5"><i class="mui-icon iconfont">&#xe621;</i></span>
										</li>-->
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</aside>
			<div class="off-canvas-backdrop"></div>
		</div>	
			<!--主界面部分-->
		<div class="inner-wrap">
				<div class="mui-content">
					<div class="header">
						<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
							<span class="name"></span>
						</a>
					</div>
					<div class="content text_area" id="content">
						<!--<div class="title mui-h5">1、科学边界</div>
						<p class="text hidden m5" id="index0">
							“我们说它不合法了吗？我们说不让你接触了吗？”他说道，刚吃吸进肚子里的烟都喷到汪淼的脸上了。
							“那好，这属于个人隐私，我没有必要回答你的问题。”
							“还啥都成个人隐私了，想你这样一个著名的学者，总该对公共安全负责把。”史强吧手中的烟头扔掉，又从压扁了的烟盒里抽出一根。
							“你看看你这个人！”史强大声说，“我们说它不合法了吗？我们
							说不让你接触了吗？”他说着，刚才吸进肚子里的烟都喷到汪淼脸
							上。
							“那好，这属于个人隐私，我没必要回答你们的问题。”
							“还
							啥都成隐私了，像你这样一个著名学者，总该对公共安全负责吧。
							”史强把手中的烟头扔掉，又从压扁了的烟盒里抽出一根。
							“我有
							权不回答，你们请便吧。”汪淼说着要转身回屋。
							“等等！”史强
							厉声说，同时朝旁边的年轻警官挥了一下手，“给他地址和电话，
							下午去走一趟。”
							啥都成隐私了，像你这样一个著名学者，总该对公共安全负责吧。
							”史强把手中的烟头扔掉，又从压扁了的烟盒里抽出一根。
							“我有
							权不回答，你们请便吧。”汪淼说着要转身回屋。啥都成隐私了，像你这样一个著名学者，总该对公共安全负责吧。
							”史强把手中的烟头扔掉，又从压扁了的烟盒里抽出一根。
							“我有
							权不回答，你们请便吧。”汪淼说着要转身回屋。权不回
						</p>
						<p class="text m5" id="index1">
							我忘了我是谁，也忘了自己是怎么来到这的，我已经在平城待了很久很久。这一座城似乎有些不同，所有来到这的人都忘了自己是谁，没有谁从这出去过，只是每过一段时间都会有一两个迷路的人误闯进来，再也没有离开。
　　
						　　今天是个特别的日子，我也不知道是哪一年的哪一天，无法记录也无法去回忆。和往常一样，在平城城门处等待着什么的我，遇见了小文，不，应该是带着纯粹的深蓝色眼眸的小文。
						　　
						　　“你好，我是来找回记忆的”
						　　
						　　看着她的眸子，双目注视，我仿佛陷了进去。我看不到希望，看不到悲伤，只有淡淡的孤独，纯粹不含杂质。
						　　
						　　“你还记得你是怎么来到这的吗，又要找回什么记忆呢？”
						　　
						　　短暂的沉默，却也是熟悉的沉默，每一个来到这的人，都会说自己是来找回记忆的，却不知道自己已经忘了过去的事情。我好像也是来找回什么的，时间太久了，我也忘了。
						　　
						　　时间过得很快，岁月仿佛是在进入平城的那一刻就静止了，我们不会老，不会死，却也无法离开，都在寻找着记忆，却无而终，渐渐地就忘了，平静的生活，就如平城一样毫无波澜。
						　　
						　　新来的小文，有着和别人不一样的地方，那就是深蓝色的眼眸，顿时成了大家谈论的焦点。就像一颗石子，激起了海面的波澜。居民们都好像想起了自己是来找寻记忆的，拉着小文问东问西。
						</p>
						<p class="text hidden m5" id="index2">
							“你还记得自己是怎么来到这的？你是来找什么的？”
　　
							　　没有回答，安静的像海底那看不到光的珊瑚里只能看到隐隐的纯粹的深蓝。她和其他人不一样，没有刚进来时的满怀希望，也没有任何悲伤。只有平静，像深蓝一样的平静。
							　　
							　　我坐在平城城墙之上，瞭望远处，望不到边际，天地连成一片，白茫茫的远处，隐约透着城市的喧嚣，也许往前走一步就是回忆里那灯红酒绿的繁华。我晃了晃脑袋，我回忆里怎么会有这些东西，我已经习惯了平城平静，习惯了等待接待下一个迷路而来的居民，习惯了慢慢找寻的回忆。
							　　
							　　只是坐在城墙上的我多了一个伴，没有交谈，只有安静的坐在我身边的小文。她问：“你在等什么”没有回答，因为我也不知道我在等什么，也许是下一个迷路的人，也许是我的回忆，也许是新的开始，也许是曾经的我。似有些不甘心，她注视着我，静静等待我的回答。我瞥了一眼，看着深蓝色的眼眸。我好像做了一个梦，梦里有海，只有海。分不出天地，看不清边缘。有一个女孩，深蓝色眼眸的女孩，穿着单薄的白色百褶裙站在海边，背对着我。海风肆虐，白裙绽放，长发飞舞。她就这么站在疾风之中，像一把倔强的海藻。
							　　
							　　“我听说平城有一个古老的故事，有人找到回忆离开了这里”略带青涩的声音将我拉回现实，我知道那个故事，耳熟能详。城里待了最久的家伙，每天都和我们说道。
							　　
							　　曾经有位诗人，一路走一路吟诗也一路忘记，有一天他来到平城。说这是他来到的第一千零一个的城市，他要用着一千零一个城市的故事酿成一壶酒，大醉余生。
							　　
							　　“你怎么还会记得以前的事，你难道知道怎么出去怎么找回原来的记忆吗”　　
						</p>
					</div>
					<div class="footer mui-text-center">
						<span class="time mui-h5 mui-pull-left">上一页</span>
						<span class="mui-h5">
							<span class="pageindex">8</span>/<span class="pages">410</span>
						</span>
						<span class="time mui-h5 mui-pull-right">下一页</span>
					</div>-->
				</div>
			</div>
		<div class="bg"> 
			<div class="mui-pull-left box1"></div>
			<div class="mui-pull-right box2"></div>
		</div> 
		<script src="../js/mui.js"></script>
		<script src="../js/open.js"></script>
		<script src="../libs/jquery/jquery.js"></script>
		<script type="text/javascript" src="../js/public.js" ></script>
		<script type="text/javascript" src="../js/details.js" ></script>
		<script type="text/javascript" src="../js/app/read-books.js" ></script>
		<script>
			mui.init({
			  	gestureConfig:{
				   tap: true, //默认为true
				   doubletap: true, //默认为false
				   longtap: true, //默认为false
				   swipe: true, //默认为true
				   drag: true, //默认为true
				   hold:false,//默认为false，不监听
				   release:false//默认为false，不监听
			  	}
			});
			$(".mui-content .content .text").css({'height':($(window).height()-$(".footer").height())-$(".title").height()-12})
			$(".off-canvas-backdrop").on('click',function(){
				$(".aside-content").animate({left:'-85%'},'fast')
				$(this).toggle()
			})
			$(".take").on('click',function(){
				$(".aside-content").animate({left:'-85%'},'fast')
				$(".off-canvas-backdrop").toggle()
			})
			$(".aside-content .content").css({'height':$(window).height()})
//			$(".inner-wrap").on('tap',function(){
//				if($('.footer-alert1').is(':hidden')){
//					$('.header').slideToggle()
//					$('.footer-alert').slideToggle()
//				}
//			}) 
			$("#book-set").on('tap',function(){
				$('.header').slideToggle()
				$('.footer-alert').slideToggle()
				$(".footer-alert1").slideToggle()
				$(".inner-wrap").on('tap',function(){
					$(".footer-alert1").slideUp()
				})
			})
			$("#CanvasBtn").on('click',function(){
				$('.footer-alert').slideDown()
				$(".aside-content").animate({left:'0'},'fast')
				$(".off-canvas-backdrop").toggle()
				$('.header').slideToggle()
				$('.footer-alert').slideToggle()
			})
			$(".menu").on('tap',function(){
				if($(".title .list").is(':hidden')){
					$(".title .list").toggle()
					$(".pull").html('&#xe619;')
				}else{
					$(".title .list").toggle()
					$(".pull").html('&#xe61a;')
				}
			})
//			$(".download").on('tap',function(){
//				$('.footer-alert').hide()
//				$('.header').hide()
//				mui.toast('正在连接中....')
//			})
//			$(".bg>.box1").on("click touchmove",function(){
//				$(".footer-alert").hide()
//				$(".footer-alert1").hide()
//				$('.header').hide()
//				$(".text").addClass("hidden")
//				$("#index0").removeClass("hidden")
//			})
//			$(".bg>.box2").on("click touchmove",function(){
//					$(".footer-alert").hide()
//					$(".footer-alert1").hide()
//					$('.header').hide()
//					$(".text").addClass("hidden")
//					$("#index2").removeClass("hidden")
//			})
		</script>
		<script>
		</script>
		<script>
		var scale = function (btn,bar,title){
			this.btn=document.getElementById(btn);
			this.bar=document.getElementById(bar);
			this.title=document.getElementById(title);
			this.step=this.bar.getElementsByTagName("div")[0];
			this.init();
		};
		scale.prototype={
			init:function (){
				var f=this,g=document,b=window,m=Math;
				f.btn.ontouchstart=function (e){
					var x=(e||b.event).clientX;
					var l=this.offsetLeft;
					var max=f.bar.offsetWidth-this.offsetWidth;
					console.log(max)
					g.ontouchmove=function (e){
						var thisX=(e||b.event).clientX;
						var to=m.min(max,m.max(-2,l+(thisX-x)));
						f.btn.style.left=to+'px';
						f.ondrag(m.round(m.max(0,to/max)*100),to);
						b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
					};
					g.ontouchcancel=new Function('this.onmousemove=null');
//					g.ontouchend=new Function('this.ontouchmove=null');

				};
			},
			ondrag:function (pos,x){
				this.step.style.width=Math.max(0,x)+'px';
//				this.title.innerHTML=pos+'%';
			}
		}
		new scale('btn','bar','title');
		</script>
	</body>

</html>